<template>
	<view class="mainBox">
		<baseform ref="form" :groupList='groupList' :labelWidth='labelWidth' :pageFormData="pageFormData" @remoteSearch='remoteSearch'
			:formItemList='formItemList' @selectChange='selectChange' @submit='submit'>
		</baseform>
	</view>
</template>

<script>
	import baseform from '@/components/base-form-uni.vue'
	export default {
		components: {
			baseform
		},
		data() {
			return {
				labelWidth: 80,
				pageFormData: {},
				receiveLocList: [],
				receiptOrderData: [],
				formItemList: []
				// formData: this.$refs['form'].formData
			}
		},
		computed: {
			pageConfig() {
				return this.$t('evectionApply')
			},
			groupList(){
				return this.$t('evectionApply').groupList
			}
		},
		onReady() {
			// 模块标题
			uni.setNavigationBarTitle({
				title: this.$t('evectionApply').basicConfig.title
			});
		},
		onLoad() {
			this.formItemList = this.pageConfig.pageItemConfig
			// console.log('==== this.formItemList :', this.formItemList);
			this.pageFormData = this.$initFormData(this.formItemList)
			// console.log('==== this.pageFormData :', this.pageFormData)
		},
		methods: {
			submit(params) {
				console.log(params);
			},

			remoteSearch(i, val) {
				console.log(i)
				console.log(val)
			},

			selectChange(index, key) {
				console.log(key, index)
				console.log(this.pageFormData)
			},
		}
	}
</script>

<style lang="scss" scoped>
	// page {
	// 	padding: 2rem 0.5rem;
	// 	background-color: #fff;
	// }
</style>
<!-- <template>
	<view class="container">
		<uni-forms ref="valiForm" :modelValue="valiFormData" :rules="rules">
			<uni-section title="主信息" type="line">
				<view class="example">
					<uni-forms-item :label-width="80" label="单据编号" required name="name">
						<uni-easyinput v-model="valiFormData.name" placeholder="请输入姓名" />
					</uni-forms-item>
					<uni-forms-item :label-width="80" label="申请组织" required name="age">
						<uni-easyinput v-model="valiFormData.age" placeholder="请输入年龄" />
					</uni-forms-item>
					<uni-forms-item :label-width="80" label="申请日期" required>
						<uni-datetime-picker type="datetime" return-type="timestamp"
							v-model="valiFormData.datetimesingle" />
					</uni-forms-item>
					<uni-forms-item :label-width="80" label="申请人" required>
						<uni-easyinput v-model="valiFormData.name" placeholder="请输入姓名" />
					</uni-forms-item>
					<uni-forms-item :label-width="80" label="承担组织" required>
						<uni-easyinput v-model="valiFormData.name" placeholder="请输入费用承担组织" />
					</uni-forms-item>
					<uni-forms-item :label-width="80" label="申请部门" required>
						<uni-easyinput v-model="valiFormData.name" placeholder="请输入姓名" />
					</uni-forms-item>
					<uni-forms-item :label-width="80" label="申请借款" required>
						<uni-data-checkbox v-model="valiFormData.sex" :localdata="sexs" />
					</uni-forms-item>
					<uni-forms-item :label-width="80" label="备注">
						<uni-easyinput type="textarea" v-model="valiFormData.introduction" placeholder="请输入自我介绍" />
					</uni-forms-item>
				</view>
			</uni-section>
			<uni-section title="行程信息" type="line">
				<view class="example">
					<uni-forms-item :label-width="80" label="自我介绍" required name="introduction">
						<uni-easyinput type="textarea" v-model="valiFormData.introduction" placeholder="请输入自我介绍" />
					</uni-forms-item>
					<button type="primary" @click="submit('valiForm')">提交</button>
				</view>
			</uni-section>
		</uni-forms>
	</view>
</template>
<script>
	import baseForm from '@/components/base-form-uni.vue'
	export default {
		data() {
			return {
				// 单选数据源
				sexs: [{
					text: '是',
					value: 0
				}, {
					text: '否',
					value: 1
				}],
				// 校验表单数据
				valiFormData: {
					name: '',
					age: '',
					introduction: '',
				},
				// 校验规则
				rules: {
					name: {
						rules: [{
							required: true,
							errorMessage: '姓名不能为空'
						}]
					},
					age: {
						rules: [{
							required: true,
							errorMessage: '年龄不能为空'
						}, {
							format: 'number',
							errorMessage: '年龄只能输入数字'
						}]
					},
					introduction: {
						rules: [{
							required: true,
							errorMessage: '年龄不能为空'
						}, {
							format: 'number',
							errorMessage: '年龄只能输入数字'
						}]
					}
				},
				// 自定义表单校验规则
				customRules: {
					name: {
						rules: [{
							required: true,
							errorMessage: '姓名不能为空'
						}]
					},
					age: {
						rules: [{
							required: true,
							errorMessage: '年龄不能为空'
						}]
					},
					hobby: {
						rules: [{
								format: 'array'
							},
							{
								validateFunction: function(rule, value, data, callback) {
									if (value.length < 2) {
										callback('请至少勾选两个兴趣爱好')
									}
									return true
								}
							}
						]
					}

				}
			}
		},
		computed: {},
		onLoad() {},
		onReady() {
			// 设置自定义表单校验规则，必须在节点渲染完毕后执行
			// this.$refs.customForm.setRules(this.customRules)
		},
		methods: {
			submit(ref) {
				this.$refs[ref].validate().then(res => {
					console.log('success', res);
					uni.showToast({
						title: `校验通过`
					})
				}).catch(err => {
					console.log('err', err);
				})
			},
		}
	}
</script>

<style lang="scss">
	page {
		padding: 2rem 1rem;
		background-color: #fff;
	}

	.example {
		padding: 15px;
		background-color: #fff;
	}

	.segmented-control {
		margin-bottom: 15px;
	}

	.button-group {
		margin-top: 15px;
		display: flex;
		justify-content: space-around;
	}

	.form-item {
		display: flex;
		align-items: center;
	}

	.button {
		display: flex;
		align-items: center;
		height: 35px;
		margin-left: 10px;
	}
</style> -->